import Vue from 'vue'
import Vuex from 'vuex'
// 导入之后本插件之后就可以实现数据的自动持久化，所有程序员手动持久化的代码都可以删掉了
import createPersistedState from 'vuex-persistedstate'
// 按需导入API接口
import { getUserInfoAPI, getUserProfileAPI } from '../api/userAPI'

Vue.use(Vuex)

// 手动持久化注释掉
// // 1、定义一个初始的不含任何数据的state对象,今后要新增全局共享的数据,只需要挂载到initState对象中即可
// // 这个对象只有结构没有数据
// let initState = {
//   // tokenInfo对象的格式为{token,refresh_token}
//   tokenInfo: {
//     token: '',
//     refresh_token: ''
//   },
//   // 用户的基本信息
//   userInfo: {},
//   // 用户的简介
//   userProfile: {}
// }
// // 2、从localStorage中读取本地数据
// const stateStr = localStorage.getItem('state')
// if (stateStr !== null) {
//   // 如果stateStr有值，以stateStr为准
//   initState = JSON.parse(stateStr)
// }

export default new Vuex.Store({
  plugins: [createPersistedState()],
  // state的值有两种情况
  // 1、它的值是从localStorage中读出
  // 2、localStorage中没有值，state的值是初始值
  state: {
    // tokenInfo对象的格式为{token,refresh_token}
    tokenInfo: {
      token: '',
      refresh_token: ''
    },
    // 用户的基本信息
    userInfo: {},
    // 用户的简介
    userProfile: {}
  },
  // 当刷新浏览器的时候，会重新加载vue项目，此时做两件事
  // 1、从localStorage中读取state数据并转为对象
  // 2、把还原回来的数据对象赋值给vuex中的state即可
  // JSON.parse() 由字符串转化为对象
  // JSON.stringify() 转化为字符串

  mutations: {
    // 专门用来修改tokenInfo的方法
    // payload的格式为{token,refresh_token}
    // 在组件中调用mutation方法有两种
    // this.$store.commit('方法名'，参数)
    // ...mapMutations(['方法名'])
    updateTokenInfo (state, payload) {
      state.tokenInfo = payload
      // 把修改后的state数据源持久化存储到localStorage
      // localStorage.setItem('state', JSON.stringify(state))
    },
    // 为了保证vuex中的state和localStorge中存住的数据保持同步，，今后只要调用了任何一个mutations方法都应该调用locaiStorge.setItem（）方法，把最新的数据源存储

    // 更新用户的基本信息
    updateUserInfo (state, payload) {
      state.userInfo = payload
      // 把修改后的state数据源持久化存储到localStorage
      // localStorage.setItem('state', JSON.stringify(state))
    },
    // 清空state和本地的数据
    cleanState (state) {
      // 1、清空state
      state.userInfo = {}
      state.tokenInfo = {}
      // 退出登录的时候清空用户的简介信息
      state.userProfile = {}
      // 2、把清空后的state持久化存储到本地
      // localStorage.setItem('state', JSON.stringify(state))
    },
    // 更新用户的简介信息
    updateUserProfile (state, payload) {
      state.userProfile = payload
      // localStorage.setItem('state', JSON.stringify(state))
    }

  },
  actions: {
    // 今后的人资后台管理项目会大量使用vuex中的模块
    // 现阶段刚入手vuex，不拆模块了
    // 初始化用户的基本信息
    async initUserInfo (ctx) {
      const { data: res } = await getUserInfoAPI()
      if (res.message === 'OK') {
        ctx.commit('updateUserInfo', res.data)
      }
    },
    // 初始化用户简介的信息
    async initgetUserProfile (ctx) {
      const { data: res } = await getUserProfileAPI()
      if (res.message === 'OK') {
        console.log('res', res)
        ctx.commit('updateUserProfile', res.data)
      }
    }
  },
  getters: {
    // getter本质上就是一个计算属性
    avatar (state) {
      console.log(111)
      // return 用户自己的值或者一个默认值
      return state.userInfo.photo || 'https://img.yzcdn.cn/vant/cat.jpeg'
    }
  }

})

// const initState = JSON.parse(localStorage.getItem('state'))
